import React from 'react';
import { connect } from 'dva';
import styles from './ExamStatistics.less';
import { routerRedux } from 'dva/router';
import { Helmet } from 'react-helmet';
import _ from 'lodash';
import { Button } from 'antd-mobile';

class ExamStatistics extends React.Component {

  componentDidMount() {
    if (!this.props.exam.trains.length) {
      this.props.dispatch({
        type: 'exam/getTrains',
        payload: {
          type: this.props.location.query.type,
          ref_type: this.props.location.query.ref_type,
          ref_id: this.props.location.query.ref_id,
        },
      });
    }
  }

  click = (i) => {
    this.props.dispatch(routerRedux.push({
      pathname: '/trainsMain',
      query: {
        // examLibName: decodeURIComponent(this.props.location.query.examLibName),
        ref_type: this.props.location.query.ref_type,
        ref_id: this.props.location.query.ref_id,
        checkResult: i,
      },
    }));
  }

  isEqual = (selectKey, answer) => {
    let boo = false;
    const selectArr = selectKey.split(',');
    const answerArr = Array.isArray(answer) ? answer : [answer];

    if (selectArr.length !== answerArr.length) {
      boo = false;
    } else if (_.isEqual(_.sortBy(selectArr), _.sortBy(answerArr))) {
      boo = true;
    }
    return boo;
  }

  noDo = () => {
    const { trains } = this.props.exam;
    const { total } = this.props.exam.pagination;
    const arr = [];

    for (let i = trains.length; i < total; i++) {
      arr.push(
        <span className={styles.noDo} key={i} onClick={this.click.bind(this, i + 1)}>
          <span className={styles.topic}>{i + 1}</span>
          &nbsp;&nbsp;&nbsp;
        </span>,
      );
    }
    return arr;
  }

  goToExamPaperList = () => {
    let { ref_type, ref_id, examLibName } = this.props.location.query;
    examLibName = decodeURIComponent(examLibName);
    this.props.dispatch(routerRedux.push({
      pathname: '/examPaperList',
      query: {
        ref_type,
        ref_id,
        examLibName,
      },
    }));
  }

  render() {
    const { trains } = this.props.exam;

    return (<div className={styles.statistics}>
      <Helmet>
        <title>
          统计详情
        </title>
      </Helmet>
      <div className={styles.header}>
        <div className={styles.span1}>
          <div className={styles.head}>
            考试结果详情
          </div>
          <div className={styles.prompt}>
            点击序号查看答题情况
          </div>
        </div>
        <div className={styles.span2}>
          {/*<Button className={styles.myButton} onClick={this.goToExamPaperList}>返回</Button>*/}
        </div>
      </div>
      <hr />

      <div className={styles.container}>
        {
          trains.map((item, i) =>
            this.isEqual(item.selectKey, item.answer) ? (
              <span className={styles.right} key={i} onClick={this.click.bind(this, i + 1)}>
                <span className={styles.topic}>{i + 1}</span>
                  ✓
                </span>
            ) : (
              <span className={styles.wrong} key={i} onClick={this.click.bind(this, i + 1)}>
                <span className={styles.topic}>{i + 1}</span>
                  ✕
                </span>
            ),
          )
        }
        {
          this.noDo()
        }

      </div>
    </div>);
  }
}

export default connect(({ exam }) => ({ exam }))(ExamStatistics);
